<template>
  <ul class="clearfix">
    <li v-for="(path,index) in paths">
      <nuxt-link :to="{path:path.url}">{{path.name}}</nuxt-link>
    </li>
  </ul>
</template>

<script>
  export default {
    data(){
      return {
        paths: [
          {name: '首页', url: '/'},
          {name: '商品管理', url: '/goods'},
          {name: '文章管理', url: '/article'},
        ]
      };
    }

  };
</script>

<style scoped>
  ul {
    margin:0;
    background: #fff;
    zoom:1;
  }

  ul:before, ul:after {
    content: "";
    display: table;
  }
  ul:after{
    clear:both;
    overflow: hidden;
  }

  ul li{
    margin:5px;
    float:left;
    list-style-type:none;
  }
  ul li a{
    padding:5px 8px;
    border: 1px solid #666;
    text-decoration:none;
  }
  ul li a:hover{
    background: #999;
    color:#fff;
  }
</style>
